<template>
  <div id="footer">
      <div id="home" class="item">
        <img src="../assets/add.png"/>
        <span>首页</span>
      </div>
      <div id="publish-button-container">
        <img src="../assets/add.png"/>
      </div>
      <div id="mine" class="item">
        <img src="../assets/add.png"/>
        <span>我的</span>
      </div>
    </div>
</template>

<script>
export default {
  name: "TabBar"
}
</script>

<style scoped>
#footer {
  color: white;
  font-size: 2vw;
  font-family: "Microsoft YaHei";
  background-color: #E0301F;
  width: 100%;
  height: 8vh;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  justify-content:space-around;
}

#footer .item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#footer .item img{
  height: 4.5vh;
  width: 4.5vh;
}

#home {
  /* width: 30%; */
}

#publish-button-container {
  /* width: 40%; */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* top: -1vh; */
}

#publish-button-container img{
  height: 8vh;
  width: 8vh;
}



#mine {
  /* width: 30%; */
  text-align: right;
}
</style>